<template>
  <div class="mv_detail" v-if="id != null && mvdetailInfo != null">
    <div class="mv_content_left">
      <div class="title">
        <b-tag plain color="var(--main-color)">MV</b-tag>
        <div class="name">{{ mvdetailInfo.name }}</div>
        <div class="artist">{{ mvdetailInfo.artistName }}</div>
      </div>
      <div class="video">
        <video :src="videoUrl" autoplay controls width="100%" class="video-play"></video>
      </div>
      <div class="mv_comment">
        <comment :id="id" :commentList="commentList" :commnetType="commnetType"></comment>
        <!-- 分页 -->
        <div class="pagination">
          <el-pagination background @current-change="handleCurrentChange" :current-page.sync="offset" :page-size="20" layout="prev, pager, next, jumper" :total="total"> </el-pagination>
        </div>
      </div>
    </div>
    <div class="mv_content_right">
      <div class="desc">
        <p class="p">MV介绍</p>
        <div class="base">
          <div class="date">发布时间:{{ mvdetailInfo.publishTime }}</div>
          <div class="playCount">播放次数:{{ mvdetailInfo.playCount }}次</div>
          <div class="clear"></div>
        </div>
        <div class="mv_desc" ref="mvDesc">
          <!-- <scroll :disable-wheel="true" class="desc-scroll" ref="descScroll"> -->
          <span class="mv_con"> 简历:</span>
          <span>{{ mvdetailInfo.desc }}</span>
          <!-- </scroll> -->
        </div>
      </div>
      <div class="mv_action">
        <h4>相关推荐</h4>
        <div class="mian" v-for="(item, index) in simiMvsList" :key="index" @click="playMV(item.id)">
          <div class="action_img">
            <img :src="item.cover" alt="" />
            <div class="count">
              <i class="iconfont icon-shipin"></i>
              <div class="play-count">{{ item.playCount }}</div>
            </div>
          </div>
          <div class="content">
            <div class="name">
              <b-tag color="var(--main-color)" plain class="tag">MV</b-tag>
              {{ item.name }}
            </div>
            <div class="content_artist">{{ item.artistName }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import comment from '../../components/common/comment/comment.vue'
import { _getCommentMv, _getMvDetail, _getMvUrl, _getMvSimi } from '../../network/mv'
export default {
  components: { comment },
  name: 'Mvdetail',
  data() {
    return {
      mvdetailInfo: null,
      videoUrl: null,
      commentList: [], // 评论列表
      total: null,
      offset: 1,
      limit: 30,
      commnetType: 1,
      simiMvsList: [],
      id: null
    }
  },
  created() {
    const { id } = this.$route.params
    this.id = parseFloat(id)
    this.initData()
  },

  methods: {
    initData() {
      _getMvDetail(this.id).then((res) => {
        this.mvdetailInfo = res.data.data
      })
      this.geturlMv()
      this.getCommentMv()
      this.getSimiMv()
    },
    playMV(id) {
      this.id = id
      this.initData()
    },
    geturlMv() {
      _getMvUrl(this.id).then((res) => {
        this.videoUrl = res.data.data.url
      })
    },
    getCommentMv() {
      _getCommentMv(this.id, this.limit, this.offset).then((res) => {
        this.commentList = res.data.comments
        this.total = res.data.total
      })
    },
    getSimiMv() {
      _getMvSimi(this.id).then((res) => {
        console.log(res)
        this.simiMvsList = res.data.mvs
      })
    },
    // 分页
    handleCurrentChange(pageCount) {
      this.offset = pageCount
      this.getCommentMv()
    }
  }
}
</script>

<style lang="less" scoped>
.mv_detail {
  width: 80%;
  margin: 0 auto;
  display: flex;
  padding: 10px 0;
  .mv_content_left {
    width: 66%;
    height: 300px;
    padding-right: 10px;
    .title {
      display: flex;
      align-items: flex-end;
      margin-bottom: 10px;
      .left-mv {
        padding: 5px;
        display: inline-block;
        border: 1px solid red;
        color: red;
      }
      .name {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 18px;
        margin-left: 5px;
      }
    }
    .video {
      width: 100%;
    }
    .mv_comment {
      width: 100%;
      .pane_comment {
        width: 100%;
        display: flex;
        .pane_left {
          width: 10%;
        }
        .pane_right {
          width: 90%;
          .pane_btn {
            padding-top: 10px;
            display: flex;
            justify-content: flex-end;
          }
        }
      }
      .pane_content {
        h4 {
          border-bottom: 2px solid #cfcfcf;
        }
        .comment_item {
          width: 100%;
          border-bottom: 1px solid #cfcfcf;
          padding: 10px 0;
          display: flex;
          .comment_item_left {
            width: 8%;
          }
          .comment_item_right {
            width: 92%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .comment_top {
              display: flex;
              width: 100%;
              font-size: 12px;
              .comment_name {
                padding-right: 4px;
                color: var(--primary);
              }
              .comment_title {
                color: #333;
              }
            }
            .comment_co {
              width: 90%;
              padding: 6px 0 6px 10px;
              background-color: #f4f4f4;
              border: 1px solid #cfcfcf;
              display: flex;
              margin: 6px auto;
              font-size: 12px;
              .comment_name {
                padding-right: 4px;
                color: var(--primary);
              }
              .comment_title {
                color: #333;
              }
            }
            .coomment_bottom {
              width: 100%;
              display: flex;
              justify-content: space-between;
              font-size: 12px;
              .comment_time {
                color: #999;
              }
              .comment_interact {
                display: flex;
                color: #333;
                .comment_interact_give {
                  padding-right: 6px;
                }
                .comment_interact_reply {
                }
              }
            }
          }
        }
      }
      .pagination {
        padding-top: 20px;
      }
    }
  }
  .mv_content_right {
    width: 34%;
    .desc {
      height: 360px;
      overflow: hidden;
      .p {
        height: 40px;
        display: flex;
        align-items: center;
        font-weight: 600;
      }
      .base {
        display: flex;
        padding-bottom: 10px;
        font-size: 14px;
        .date {
          padding-right: 10px;
        }
      }
      .mv_desc {
        font-size: 14px;
        .mv_con {
          font-weight: 800;
        }
      }
    }
    .mv_action {
      width: 100%;
      .mian {
        width: 100%;
        display: flex;
        padding-bottom: 20px;
        .action_img {
          width: 60%;
          height: 100px;
          position: relative;
          img {
            width: 100%;
          }
          .count {
            position: absolute;
            top: 0;
            right: 0;
            width: 42%;
            height: 30px;
            color: #fff;
            font-size: 14px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
          }
        }
        .content {
          width: 40%;
          height: 100px;
          display: flex;
          flex-direction: column;
          font-size: 14px;
          justify-content: space-around;
          .name {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          .content_artist {
          }
        }
      }
    }
  }
}
</style>
